<template>
    <section class="page">
        <section class="card">
            <h2 class="titleSty">{{ articleDel.name }}</h2>
            <section class="userInfo">
                作者： {{ articleDel.uname }} &nbsp;&nbsp;&nbsp;&nbsp;浏览量: 12291 &nbsp;&nbsp;&nbsp;&nbsp;
                发布时间：{{ filterTime(articleDel.time) }}
            </section>
            <section class="connect" v-html="articleDel.contentHtml" style="text-align: left;"></section>
        </section>
        <section>
            <section style="text-align: left;font-size: .2rem;">发表评论：</section>
            <textarea class="areaSty" v-model="utext"></textarea>
            <el-button type="primary" @click="faBuComment()">发布</el-button>
        </section>
    </section>
    <section style="padding: .8rem;">
        <section style="text-align: left;font-size: .2rem;">评论列表</section>
        <section class="flexBox" v-for="(item,index) in commentList" :key="index">
            <img src="../../assets/user.png" class="uImgSty" />
            <section style="text-align: left;">
                <p>
                    {{item.uname}}
                    <span>发布于： {{ filterTime(item.time) }}</span>
                </p>
                <p>{{item.utext}}</p>
            </section>
            <el-button type="warning" size="small" style="margin-left: 10px;" v-if="isDel" @click="delCommentFun(item.commentId)">删除</el-button>
        </section>
    </section>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { getArticle, postComment, getCommentList,delComment } from '../../api/index'
import { useRoute } from 'vue-router';
import { ElMessage } from "element-plus";
// const props = defineProps<{
//     id: number
// }>()
const Route = useRoute();
const articleDel = ref<any>([])
const articleId = ref<any>(0)
const utext = ref('')
const isDel = ref<boolean>(false)
const commentList  = ref<any>([])
function delCommentFun(id: any){
    let params = {
        commentId: id
    }
    delComment(params).then((res)=>{
        ElMessage.success('删除成功!')
         getCommentFun()
    })
}
function getCommentFun() {
    let params = {
        articleId: articleId.value
    }
    getCommentList(params).then((res: any) => {
        commentList.value = res.data
    })
}
function faBuComment() {
    let params = {
        uname: sessionStorage.getItem('name'),
        utext: utext.value,
        articleId: articleId.value
    }
    postComment(params).then((res) => {
        ElMessage.success('发布成功')
        getCommentFun()
    })
}
function getArticleListFun() {
    let patams = {
        id: articleId.value
    }
    getArticle(patams).then((res: any) => {
        res.data[0].contentHtml = '`' + res.data[0].contentHtml + '`'
        articleDel.value = res.data[0]
          if(res.data[0].uname == sessionStorage.getItem('name')){
              isDel.value = true
          }
    })
}
onMounted(() => {
    articleId.value = Route.query.id
    getArticleListFun()
    getCommentFun()
});
const filterTime = computed(() => (time: string) => {
    return formatDate(Number.parseInt(time))
})

function formatDate(str: string | number | Date) {
    let date = new Date(str);
    let year = date.getFullYear();
    let month: string | number = date.getMonth() + 1;
    month = month < 10 ? ('0' + month) : month;
    let day: string | number = date.getDate();
    day = day < 10 ? ('0' + day) : day;
    let h: string | number = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let m: string | number = date.getMinutes();
    m = m < 10 ? ('0' + m) : m;
    let s: string | number = date.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s;
}
</script>

<style>
.flexBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.uImgSty {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin-right: 10px;
}
.areaSty {
    width: 12rem;
    height: 2rem;
    resize: none;
    background-color: #fff;
    border: 1px solid #ccc;
}
.page {
    width: 100%;
    height: 100%;
    background-color: #f3f4f5;
    padding: 0.1rem;
    box-sizing: border-box;
}
.card {
    min-height: 6rem;
    background-color: #fff;
    overflow: hidden;
}
.titleSty {
    margin-top: 10px;
}
.userInfo {
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    background-color: #f3f4f5;
    text-align: left;
}
</style>